<template>
  <!-- 柱状图+折线图  :colors="color" :y-axis="yAxis"-->
  <ve-histogram :data="axisOption" :extend="chartExtend" :settings="chartSettings" style="width: 100%; height: 100%"
    ref="tableChart" :events="chartPEvents"></ve-histogram>
</template>

<script>
export default {
  props: {
    echartDataSku: {
      type: Object,
      default() {
        return {
          columns: [],
          rows: [],

        };
      },
    },
  },
  name: "barLineI",
  // props: {
  //   chartData: {
  //     type: Object,
  //     default() {
  //       return {
  //         columns: [],
  //         rows: [],
  //       };
  //     },
  //   },
  // },
  data() {
    this.title = {
      text: "折线图+柱状图",
    };
    this.color = ["rgb(255,204,51)", "rgb(0,143,224)", "rgb(217,0,27)"];
    this.chartSettings = {
      // "0.[00]a",
      yAxisType: ["0.[00]", "0.[00]%"],
      showLine: ["同比"],
      //   yAxisName: ["数值轴", "比率轴"],
      axisSite: {
        right: ["同比"],
      },
    };
    this.yAxis = [
      {

        show: true,
        splitLine: { show: false }, //去除网格线
        //设置轴线的属性
        axisLabel: {
          formatter: (value) => `${(value * 100).toFixed(0)}%`, // 强制显示百分比
        },
        axisTick: {
          //y轴刻度线
          show: true,
        },
        axisLine: {
          //y轴
          show: true,
        },
      },
      {
        show: true,
        splitLine: { show: false }, //去除网格线
        //设置轴线的属性
        axisLabel: {
          color: "red",
          formatter: (value) => `${(value * 100).toFixed(0)}%`, // 强制显示百分比
        },
        axisTick: {
          //y轴刻度线
          show: true,
        },
        axisLine: {
          //y轴
          show: true,
        },
      },
    ];

    const _this = this;
    // 饼图点击事件
    this.chartPEvents = {
      click: function (e) {
        _this.getNotChartData(e);
      },
    };
    return {
      chartExtend: {},
      axisOption: {},
      // v-chart设置悬浮内容
      barChartDataTooltip: {
        formatter: function (data) {
          return `${data.name}：${data.value}%`;
        },
      },
    };
  },
  watch: {
    echartDataSku: {
      handler: function (newVal) {
        // 转换同比数据为小数格式
        const processedRows = newVal.rows.map((row) => ({
          ...row,
          同比: row.同比 / 100, // 假设字段名为"同比"
        }));

        this.axisOption = {
          columns: newVal.columns,
          rows: processedRows,
        };

        this.initChart();
        // this.axisOption = newnew;
        // 这里需要让表格重新绘制一下，否则会产生固定列错位的情况
        // console.log(new Date());
        this.$nextTick(() => {
          // this.$refs.table.doLayout();
          this.$refs.tableChart.echarts.resize();
          // console.log('渲染完成时间', new Date());
        });
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    getNotChartData(e) {
      console.log(e.name);
      // return;
      this.$emit("vchartData", e.name);
    },
    initChart() {
      // const that = this;
      this.chartExtend = {
        // tooltip: {
        //   formatter: function (params) {
        //     let result = params[0].name + '<br>';
        //     const axisSite = that.chartSettings.axisSite || {};
        //     const rightSeries = axisSite.right || [];

        //     params.forEach(param => {
        //       let value = param.value;
        //       // 判断系列是否在右侧轴（比率轴）或系列名含"率"
        //       if (
        //         rightSeries.includes(param.seriesName) ||
        //         param.seriesName.includes('率')
        //       ) {
        //         value = value.toFixed(2) + '%';
        //       }
        //       result += param.marker + param.seriesName + ': ' + value + '<br>';
        //     });
        //     return result;
        //   }
        // },
        series(v) {
          v.forEach((i, index) => {
            i.barWidth = 15;
            i.barGap = 0;
            if (i.type !== "line") {
              i.label = {
                show: true,
                position: index === 0 ? 'left' : 'right',
                color: "#333",
                fontSize: 12,
                formatter: ({ value }) => Math.round(value) + "%",
              };
            }
          });
          return v;
        },
        xAxis(v) {
          v.forEach((i) => {
            i.show = true;
            i.splitLine = { show: false };
            i.axisTick = { show: true };
            i.axisLine = { show: true };
          });
          return v;
        },
      };
    },
  },
};
</script>